<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- 用title设置文档标题 -->
        <title>遍历节点</title>
    </head>
    <body>

        <h3>遍历整个页面上所有节点</h3>
        <p>请在终端中查看遍历结果</p>

        <script type="text/javascript">

            const types = {
                '1': 'ELEMENT_NODE' ,
                '2': 'ATTRIBUTE_NODE' ,
                '3': 'TEXT_NODE' ,
                '8': 'COMMENT_NODE' ,
                '9': 'DOCUMENT_NODE' ,
                '10': 'DOCUMENT_TYPE_NODE'
            }

            Object.freeze( types );

            function traversal( node ){
                console.log( `nodeType: ${ types[ node.nodeType ] } , nodeName: ${node.nodeName}` );
                if( node.hasChildNodes() ) {
                    // 获得所有的子节点(包括元素、文本、注释等节点)
                    let childs = node.childNodes ;
                    // 将 类数组对象(实例级别) 转换为 数组对象(实例级别)
                    let array = Array.from( childs );
                    array.forEach( ch => {
                        // 调用 traversal 函数处理 ch 节点
                        traversal( ch );
                    });
                }
            }

            traversal( document );
        </script>
        
    </body>
</html>